<template>
  <div class="page">
    <!-- Table -->
    <div class="page-table">
      <Table :loading="loading" :columns="tableColumns" :data="list">
        <template #type="{ scope: { row } }">
          <span v-if="row.type === 1">{{ row.value }} 元</span>
          <span v-if="row.type === 2">{{ row.value }}%</span>
        </template>
        <template #value="{ scope: { row } }">
          <span v-if="row.type === 1">{{ row.value }} 元</span>
          <span v-if="row.type === 2">{{ row.value }}%</span>
        </template>
        <template #operation="{ scope: { row } }">
          <el-link type="primary" :underline="false" @click="addHandle(row)">
            修改
          </el-link>
        </template>
      </Table>
    </div>
    <!-- Dialog -->
    <DialogAdd ref="dialogAddRef" :current="current" @confirm="confirmHandle" />
  </div>
</template>

<script setup>
// components
import Form from '@/components/Form/Form.vue'
import Table from '@/components/Table/Table.vue'
import DialogAdd from './add.vue'
// hooks
import useForm from '@/hooks/useForm'
import useAsync from '@/hooks/useAsync'
// api
import { getSystemShare } from '@/api/system'
// others
import { ref, watch } from 'vue'
import { tableColumns } from './config'

const { result: list, loading, doResult } = useAsync({ request: getSystemShare })
watch(() => list.value, val => {
  console.log(val)
})

/** 新增 编辑 删除 */
const dialogAddRef = ref(null)
const current = ref(null)
const addHandle = (row) => {
  current.value = row || null
  dialogAddRef.value.show()
}

const confirmHandle = () => {
  doResult()
}
</script>

<style lang="less" scoped></style>
